<template>
  <div id="cryptos" class="mt-20">
    <div class="nav mb-40">
      <div v-for="(item, index) in navList" :key="index" class="list" @click="goPath(item.name)">
        <div class="imgBox"><img :src="handleImage(item.icon)" alt=""></div>
        <div class="mt-15 text-center title">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    symbolType: {
      type: String,
      default: 'indices'
    },
  },
  data() {
    return {
      navList: [
        {
          name: this.$t('买入'),
          icon: new URL('@/assets/image/exNav/icon01.png', import.meta.url),
        },
        {
          name: this.$t('卖出'),
          icon: new URL('@/assets/image/exNav/icon02.png', import.meta.url),
        },
        // {
        //   name: this.$t('撤单'),
        //   icon: new URL('@/assets/image/exNav/icon03.png', import.meta.url),
        // },
        {
          name: this.$t('持仓'),
          icon: new URL('@/assets/image/exNav/icon04.png', import.meta.url),
        },
        {
          name: this.$t('查询'),
          icon: new URL('@/assets/image/exNav/icon05.png', import.meta.url),
        },
      ],
      pathList: {
        indices: {
          [this.$t('买入')]: '/quotes/openTrade?tabActive=0&symbol=GlobalETF500&from=trade&type=indices',
          [this.$t('卖出')]: '/quotes/openTrade?tabActive=1&symbol=GlobalETF500&from=trade&type=indices',
          // [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&symbol=GlobalETF500&from=trade&type=indices',
          [this.$t('持仓')]: '/quotes/openTrade?tabActive=3&symbol=GlobalETF500&from=trade&type=indices',
          [this.$t('查询')]: '/quotes/openTrade?tabActive=4&symbol=GlobalETF500&from=trade&type=indices',
        },
        cryptos: {
          [this.$t('买入')]: '/cryptos/perpetualContract/btcusdt?tabActive=0&from=trade',
          [this.$t('卖出')]: '/cryptos/perpetualContract/btcusdt?tabActive=1&from=trade',
          // [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&from=trade',
          [this.$t('持仓')]: '/cryptos/perpetualContract/btcusdt?from=trade&type=cryptos&tradeTabActive=1&navActive=0',
          [this.$t('查询')]: '/cryptos/perpetualHistory?symbol=btcusdt&type=cryptos&tradeTabActive=1&navActive=2',
        },
        'forex': {
          [this.$t('买入')]: '/foreign/coinChart?symbol=BTCUSD&tabActive=0&from=trade',
          [this.$t('卖出')]: '/foreign/coinChart?symbol=BTCUSD&tabActive=1&from=trade',
          // [this.$t('撤单')]: '/quotes/openTrade?tbActive=2&symbol=BTCUSD&from=trade',
          [this.$t('持仓')]: '/position/index?tabActive=3&from=trade',
          [this.$t('查询')]: '/history/list?tabActive=4&from=trade',
        },
        'US-stocks': {
          [this.$t('买入')]: '/quotes/openTrade?tabActive=0&symbol=AAPL&from=trade&type=US-stocks',
          [this.$t('卖出')]: '/quotes/openTrade?tabActive=1&symbol=AAPL&from=trade&type=US-stocks',
          // [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&symbol=AAPL&from=trade&type=US-stocks',
          [this.$t('持仓')]: '/quotes/openTrade?tabActive=3&symbol=AAPL&from=trade&type=US-stocks',
          [this.$t('查询')]: '/quotes/openTrade?tabActive=4&symbol=AAPL&from=trade&type=US-stocks',
        },
      }
    }
  },
  methods: {
    handleImage(url) {
      return new URL(url, import.meta.url).href
    },
    goPath(name) {
      const pathName = this.pathList[this.symbolType][name]
      if (!pathName) return
      this.$router.push(pathName)
    }
  },
  // activated() {
  //   this.navList = [
  //     {
  //       name: this.$t('买入'),
  //       icon: `./img/icon01.png`,
  //       path: '/cryptos/exchangePage'
  //     },
  //     {
  //       name: this.$t('卖出'),
  //       icon: `./img/icon02.png`,
  //       path: '/cryptos/accountChange'
  //     },
  //     {
  //       name: this.$t('撤单'),
  //       icon: `./img/icon03.png`,
  //       path: '/cryptos/funds'
  //     },
  //     {
  //       name: this.$t('持仓'),
  //       icon: `./img/icon04.png`,

  //       path: '/cryptos/funds'
  //     },
  //     {
  //       name: this.$t('查询'),
  //       icon: `./img/icon05.png`,
  //       path: '/cryptos/trendDetails/btc'
  //     },
  //   ]
  // },
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26px;
    color: #21262F;
  }

  .list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    color: $text_color;

    &:last-child {
      margin-right: 0px;
    }

    .title {
      font-family: 'PingFang HK';
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 17px;
      text-align: center;
    }
  }

  .imgBox {
    width: 48px;
    height: 48px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
